<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>朋友圈任务计划管理</title>
    <link rel="stylesheet" href="../assets/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../assets/style/admin.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <script src="../assets/layui/layui.js"></script>
    <script src="../assets/js/common.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script src="../common/header.js"></script>
    <!-- 内容主体区域 -->
    <div id="LAY_app_body">
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            朋友圈任务计划管理
                        </div>
                        <div class="layui-card-body">
                            <form class="layui-form" action="">
                                <div class="layui-inline">
                                    <div class="layui-input-inline">
                                        <select id="group_id1" style="layui-input-inline" onchange="reloadList()">
                                            <option value="9">全部</option>
                                            <option value="1">等待执行</option>
                                            <option value="2">执行中</option>
                                            <option value="3">执行完毕</option>
                                            <option value="4">失败</option>
                                            <option value="0">已取消</option>
                                        </select>
                                    </div>
                                </div>
                            </form>
                            <table id="LAY-list-manage" lay-filter="LAY-list-manage"></table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        var requestCancel;
        var reloadList;
        layui.use(['element', 'table', 'form', 'laydate'], function(){
            var $ = layui.$
                ,table = layui.table
                ,laydate = layui.laydate
                ,form = layui.form
                ,element = layui.element;

            element.init();

            var status = $('#status').find("option:selected").val();
            table.render({
                elem: '#LAY-list-manage'
//            ,height: 315
                ,where: {//设定异步数据接口的额外参数
                    status: status
                }
                ,url: '/sns_post_plan/list_data' //数据接口
                ,page: true //开启分页
                ,cols: [[ //表头
                    {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
                    ,{field: 'created', title: '创建时间', width:170}
//                ,{field: 'date', title: '执行日期', width:120}
                    ,{field: 'sns_post_id', title: '朋友圈素材', width:150, templet: '#snsPostTpl'}
                    ,{field: 'delete_last_post', title: '删除最后一条朋友圈', width:170, templet: '#deleteLastPostTpl'}
                    ,{field: 'status', title: '状态', width:100, templet: '#statusTpl', unresize: true}
                    ,{field: 'total', title: '进度', templet: '#totalTpl'}
                    ,{fixed: 'right', width:120, align:'center', toolbar: '#barDemo'}
                ]]
                ,title: '列表'
//            ,toolbar: '#toolbarDemo'
//            ,defaultToolbar: ['filter']
            });

            //监听工具条
            table.on('tool(LAY-list-manage)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的DOM对象

                if(layEvent === 'cancel'){ //查看
                    requestCancel(data.id);
                }
            });

            requestCancel = function (planId) {
                layer.confirm('您确定要取消任务吗？', {
                    btn: ['确定','再想一想'] //按钮
                }, function(index){
                    console.log('planId:'+planId);
                    var post = {
                        id: planId
                    };
                    $.ajax({
                        type: "POST",
                        url: "/sns_post_plan/cancel",
                        data: post,
                        success:function(response){
                            var dataObj = $.parseJSON(response);
                            if(dataObj.code == 0) {
                                layer.msg(dataObj.msg, {icon: 6});
                                layer.close(index);
                                setTimeout(function(){
                                    reloadList();
                                }, 1000);
                            } else {
                                layer.msg(dataObj.msg, {icon: 5});
                            }
                        },
                        error: function (request, status, error) {

                        }
                    });
                }, function(){

                });
            };

            reloadList = function (reset) {
                if (reset==true) {
                    $('#status').find('option:first').attr("selected",false);
                    $('#status').find('option:first').attr("selected",true);
                }
                var status = $('#status').find("option:selected").val();
                table.reload('LAY-list-manage', {
                    where: { //设定异步数据接口的额外参数，任意设
                        status: status
                    }
                    ,page: {
                        curr: 1 //重新从第 1 页开始
                    }
                });
            };
        });

    </script>
    <script type="text/html" id="statusTpl">
        {{# if(d.status == 0){ }}
        <span style="color: orange;">已取消</span>
        {{# } else if(d.status == 1){ }}
        <span style="color: black;">等待执行</span>
        {{# } else if(d.status == 2){ }}
        <span style="color: blue;">执行中</span>
        {{# } else if(d.status == 3){ }}
        <span style="color: green;">执行完毕</span>
        {{# } else if(d.status == 4){ }}
        <span style="color: red;">失败</span>
        {{# } }}
    </script>
    <script type="text/html" id="deleteLastPostTpl">
        {{# if(d.delete_last_post == 0){ }}
        <span style="color: blue;">否</span>
        {{# } else if(d.delete_last_post == 1){ }}
        <span style="color: red;">是</span>
        {{# } }}
    </script>
    <script type="text/html" id="snsPostTpl">
        <span class="layui-text"><a target="_blank" href="/sns_post/edit/{{ d.sns_post_id }}" title="点击查看">{{ d.sns_post_content }}</a></span>
    </script>
    <script type="text/html" id="totalTpl">
        总：{{ d.total }}，待执行：{{ d.total-d.success-d.failed-d.canceled }}，完成：{{ d.success }}，取消：{{ d.canceled }}，失败：{{ d.failed }}
    </script>
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" href="/sns_post_plan/detail/{{ d.id }}" target="_blank">明细</a>
        {{# if(d.status == 1 || d.status == 2){ }}
        <button type="button" class="layui-btn layui-btn-warm layui-btn-xs" lay-event="cancel">取消</button>
        {{# } }}
    </script>
</div>
</body>
</html>
